<template>
	<view class="content">
		<!-- F1: 状态栏 -->
		<myStatusbar />
		<!-- F2: 已定义导航栏 -->
		<uni-nav-bar 
			title="邻里互动"
			backgroundColor="#090"
			color="#FFF"
			leftIcon="back"
			leftText="返回"
			rightIcon="camera-filled"
			@clickLeft="goBack"
		/>
		<!-- F3: 封面图 -->
		<view class="cover">
			<image src="/static/img/chatroot.png" class="pic" />
			<image src="/static/img/avatar.svg" class="avatar" />
		</view>
		<!-- F4: 消息列表 -->
		<uni-list class="msg-list">
			<uni-list-item
				v-for="item in msgList"
				:key="item.mid"
			>
				<template v-slot:header>
					<view class="avatar">
						<image :src="baseURL + item.avatar" />
					</view>
				</template>
				<template v-slot:body>
					<view class="msg-body">
						<view class="msg-hd">
							<text class="uname">{{item.uname}}</text>
							<text class="location">
							{{item.location}}
							</text>
						</view>
						<text class="content">{{item.content}}</text>
						<view class="pic-list">
							<image 
							v-for="pic in item.plist"
							:src="baseURL + pic.url" 
							:key="pic.pid"
							/>
						</view>
						<view class="msg-ft">
							<text class="time">{{item.pubTime | formatDate}}</text>
							<view class="icons">
								<uni-icons type="heart" size="22" color="#8A8A8A" />
								<text class="txt">{{item.likeCount}}</text>
								<uni-icons type="chat" size="24" color="#8A8A8A" />
								<text class="txt">{{item.replyCount}}</text>
								<uni-icons type="redo" size="24" color="#8A8A8A" />
							</view>
						</view>
					</view>
				</template>
			</uni-list-item>
		</uni-list>
		<!-- 加载更多 -->
		<uni-load-more :status="isMore ? 'more' : 'noMore'"></uni-load-more>
	</view>
</template>

<script>
	import { chatList,baseURL } from '../../service'
	export default {
		data() {
			return {
				msgList: [],  // 保存互动消息列表
				baseURL,  // 服务器基础地址
				pageNum: 0,   // 保存当前的页码
				isMore: true  // 是否还有更多数据
			}
		},
		// 页面加载后执行
	  onLoad() {
			this.loadNextData()
		},
		// 当页面触底后执行
		onReachBottom() {
			this.loadNextData()
		},
		// 当下拉刷新的时候执行
		onPullDownRefresh() {
			// 回到初始值
			this.msgList = []
			this.pageNum = 0
			this.isMore = true
			// 请求数据
			this.loadNextData()
			// 停止下拉刷新
			uni.stopPullDownRefresh()
		},
		methods: {
			goBack() {
				uni.navigateBack()
			},
			// 封装发送请求的函数
			async loadNextData() {
				// 先让页码加1
				this.pageNum = this.pageNum + 1
				// 然后再请求这一页数据
				const data = await chatList(this.pageNum)
				console.log(data)
				// 如果data是空数组，说明已经到了最后
				if(data.length === 0) {
					this.isMore = false
					return // 阻止往后执行
				}
				// 把加载的数据添加到后边
				this.msgList = this.msgList.concat(data)
				// 对比加载后和加载前，没有数据说明已经到最后
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: $uni-bg-color;
	}
	.cover {
		display: block;
		position: relative;
		.pic {
			width: 750rpx;
			height: 350rpx;
		}
		.avatar {
			width: 160rpx;
			height: 160rpx;
			position: absolute;
			right: 40rpx;
			bottom: -80rpx;
		}
	}
	
	.msg-list {
		margin-top: 80rpx;
		.avatar {
			margin-right: $uni-spacing-row-sm;
			image {
				width: 90rpx;
				height: 90rpx;
			}
		}
		.msg-body {
			flex-direction: column;
			.msg-hd {
				justify-content: space-between;
				margin-bottom: $uni-spacing-col-base;
				.uname {
					
				}
				.location {
					font-size: $uni-font-size-sm;
					color: $zh-theme-grey-light;
				}
			}
			.content {
				font-size: $uni-font-size-base;
				margin-bottom: $uni-spacing-col-sm;
			}
			.pic-list {
				// display: block;
				// 弹性布局中，设置一行占满后会自动换行
				flex-wrap: wrap;
				image {
					width: 180rpx;
					height: 120rpx;
					margin-right: $uni-spacing-row-sm;
					margin-bottom: $uni-spacing-col-sm;
				}
			}
			.msg-ft {
				justify-content: space-between;
				align-items: center;
				margin-top: $uni-spacing-col-sm;
				.time {
					font-size: $uni-font-size-sm;
					color: $zh-theme-grey-light;
				}
				.icons {
					align-items: center;
					.txt {
						font-size: $uni-font-size-sm;
						color: $zh-theme-grey-light;
						margin-right: $uni-spacing-row-lg;
					}
				}
			}
			
		}
	}
</style>
